<template>
  <div class="recommend">
    <div class="recommend-allpart">
      <ul>
        <li class="recommend-part"><span class="iconfont">&#xe611;</span>定位失败</li>
        <li class="recommend-part"><span class="iconfont">&#xe76c;</span>玩水季</li>
      </ul>
    </div>
    <div class="recommend-line"></div>
    <div class="recommend-allbg">
      <ul>
        <li class="recommend-bg bg1"><img src="http://img1.qunarzz.com/piao/fusion/1806/29/30427c0e0658b502.png" alt=""></li>
        <li class="recommend-bg"><img src="http://img1.qunarzz.com/piao/fusion/1806/36/e89032c5f7714f02.png" alt=""></li>
      </ul>
    </div>
    <div class="recommend-line"></div>
    <div class="recommend-rec">
      <div class="recommend-r-title">
        <img class="title-img" src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="">
        <span class="title">猜你喜欢</span>
      </div>
      <div class="recommend-content">
        <ul>
          <li class="item" v-for="item in itemList" :key="item.id" :item="item">
            <div class="item-left">
              <img class="item-img" :src="item.imgURL" alt="">
            </div>
            <div class="item-right">
              <h2 class="desc">{{item.desc}}</h2>
              <i class="icon-start"></i>
              <p class="talking">{{item.talking}}</p>
              <p class="price">
                ￥
                <em class="font-style">{{item.price}}</em>
                起
                <span class="address">{{item.address}}</span>
              </p>
            </div>
            <div class="recommend-line1"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  name: 'HomeRecommend',
  data: function () {
    return {
      itemList: [{
        id: '001',
        imgURL: 'http://img1.qunarzz.com/sight/p0/1803/12/126471e0966aca5ba3.img.jpg_200x200_f1286016.jpg',
        desc: '北京国际鲜花港',
        talking: '1927条评论',
        price: '19.9',
        address: '顺义区'
      }, {
        id: '002',
        imgURL: 'http://img1.qunarzz.com/sight/p0/1709/e4/e48857f2ce5e53a7a3.img.jpg_200x200_8ee069fe.jpg',
        desc: '远去的恐龙',
        talking: '423条评论',
        price: '140',
        address: '朝阳区'
      }, {
        id: '003',
        imgURL: 'http://img1.qunarzz.com/sight/p0/1803/12/126471e0966aca5ba3.img.jpg_200x200_f1286016.jpg',
        desc: '北京欢乐谷',
        talking: '55632条评论',
        price: '180',
        address: '朝阳区'
      }, {
        id: '004',
        imgURL: 'http://img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_200x200_1bc99086.jpg',
        desc: '故宫',
        talking: '251241条评论',
        price: '20',
        address: '东城区'
      }, {
        id: '005',
        imgURL: 'http://img1.qunarzz.com/sight/p0/201405/23/0265195fc4b7913a758674357c3cc8f6.jpg_200x200_b58ea00b.jpg',
        desc: '北京欢乐水魔方',
        talking: '2866条评论',
        price: '111',
        address: '丰台区'
      }]
    }
  }
}
</script>
<style lang="stylus" scoped>
  .recommend
    width :100%
  .recommend:after
    content :""
    clear :both
  .recommend-part
    width :50%
    float left
    height: 1rem
    line-height :1rem
    text-align :center
  .recommend-line
    width 100%
    height :0.2rem
    background-color :#eaeaea
    float :left
  .recommend-line1
    width :98%
    height :0.02rem
    background-color :#eaeaea
    float :right
  .recommend-bg
    width :49.5%
    height :0
    overflow :hidden
    padding-bottom :15.4%
    float :left
  .bg1
    border-right :1px solid #eaeaea
  .recommend-bg img
    display :block
    width :80%
    margin :0 auto
  .recommend-rec
    width :100%
    float :left
  .recommend-r-title
    width :100%
    float :left
    margin :0.2rem 0.2rem
  .recommend-content
    float :left
  .title-img
    width :0.36rem
  .title
    font-size :0.28rem
  .recommend-content
    width :100%
   .item
      width:100%
      float :left
      height: 2.4rem
      margin-top:0.1rem
    .item-left
      width :30%
      height :0
      float :left
      overflow :hidden
      padding-bottom :30%
    .item-img
      width : 2rem
      padding : 0.2rem 0.24rem
      float :left
    .item-right
      width : 70%
      height :2rem
      float :left
      margin-top :0.2rem
      position :relative
    .desc,.price,.talking
      position :absolute
    .desc
      font-size :0.35rem
      top :0.2rem
      left :0.2rem
    .talking
      top : 0.8rem
      left : 2rem
    .price
      width :100%
      top : 1.6rem
      left :0
      text-indent: 0.2rem
      .address
        display :block
        float :right
        margin-right :0.2rem
      .font-style
        color :#ff8300
        font-size: .4rem;
</style>
